<template>
  <Row>
    <Col>
    </Col>
  </Row>
  <Row :gutter="10">
    <Col :span="4">
    <Card>
      <template #title>系统菜单</template>
      <Select v-model="moduleID" placeholder="请选择模块" @on-change="moduleChg">
        <Option v-for="item in moduleList" :value="item.moduleID" :key="item.moduleID">{{ item.name }}
        </Option>
      </Select>
      <Tree ref="tree" :data="treeList.data" @on-contextmenu="handleContextMenu" show-checkbox
        @on-select-change="treeSel" @on-check-change="treeChk" :render="renderContent">
        <template #contextMenu>
          <DropdownItem @click="add(1)">添加上级菜单</DropdownItem>
          <DropdownItem @click="add(0)">添加同级菜单</DropdownItem>
          <DropdownItem @click="add(-1)">添加下级菜单</DropdownItem>
          <DropdownItem @click="move(1)">向上移动</DropdownItem>
          <DropdownItem @click="move(-1)">向下移动</DropdownItem>

          <DropdownItem @click="add(-2)">编辑</DropdownItem>
          <DropdownItem @click="del" style="color: #ed4014">批量删除</DropdownItem>
        </template>
      </Tree>
    </Card>
    </Col>
    <Col :span="10">
    <Card>
      <template #title>系统角色</template>
      <Role @getMenuData="getMenuList" @getMenu="getMenu" :roleTargetList="roleTargetList.data">
      </Role>
    </Card>
    </Col>
    <Col :span="10">
    <Card>
      <template #title>系统功能</template>
      <Func @getMenuData="getMenuList" @getMenu="getMenu" :funcTargetList="funcTargetList.data">
      </Func>
    </Card>
    </Col>
  </Row>
  <AddOrUpdate ref="modal" @initTree="initTree"></AddOrUpdate>
</template>
<script setup>
import { reactive, toRaw, resolveComponent } from 'vue'
import http from '@/util/http'
import Role from './role/Role.vue'
import Func from './func/Func.vue'
import AddOrUpdate from './AddOrUpdate.vue'

let { proxy } = getCurrentInstance()
let treeList = reactive({ data: [], contextData: null, oper: 'role' })
let roleTargetList = reactive({ data: [] })
let funcTargetList = reactive({ data: [] })
const tree = ref()
const modal = ref()
let moduleID = ref()

let moduleList = reactive([])

const initModule = () => {
  http.get('/Basic/Module/All', {}, (response) => {
    moduleList = response.data.data
  })
}
initModule()

const moduleChg = (moduleID) => {

  http.get('/Basic/Menu/GetTreeListByModuleID?moduleID=' + moduleID, {}, (response) => {
    treeList.data = response.data.data
  })

}

const initTree = () => {
  http.get('/Basic/Menu/GetTreeListByModuleID?moduleID=' + moduleID.value, {}, (response) => {
    treeList.data = response.data.data
  })
}

const handleContextMenu = (data) => {
  treeList.contextData = data
}

const add = (type) => {
  modal.value.show(treeList.contextData, type, moduleID.value)
}

const move = (type) => {
  http.post('/Basic/Menu/Move', { menuID: treeList.contextData.id, type: type }, (response) => {
    if (response.data.flag) {
      initTree()
      proxy.$Message.success(response.data.msg)
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}

const del = () => {
  var menu = tree.value.getCheckedNodes()
  if (menu.length === 0) {
    proxy.$Message.error('没有勾选任何项')
    return
  }
  proxy.$Modal.confirm({
    title: '询问',
    content: '确定删除?',
    onOk: () => {

      var ids = []
      menu.forEach((element) => {
        ids.push(element.id)
      })
      http.post('/Basic/Menu/Del', { menuIDs: ids }, (response) => {
        if (response.data.flag === true) {
          initTree()
          proxy.$Message.success(response.data.msg)
        } else {
          proxy.$Message.error(response.data.msg)
        }
      })
    },
    onCancel: () => {

    },
  })
}

const getMenuList = ({ fn }) => {
  fn(tree.value.getCheckedAndIndeterminateNodes())
}

const getMenu = ({ fn }) => {
  fn(tree.value.getSelectedNodes())
}

const treeChk = () => {
  roleTargetList.data = []
  funcTargetList.data = []
}

const treeSel = (obj1, obj2) => {
  if (treeList.oper === 'role') {
    http.get('/Basic/Menu/GetRoleByMenuID?menuID=' + toRaw(obj2).id, {}, (response) => {
      roleTargetList.data = response.data.data
    })
  }
  if (treeList.oper === 'func') {
    http.get('/Basic/Menu/GetFuncByMenuID?menuID=' + toRaw(obj2).id, {}, (response) => {
      funcTargetList.data = response.data.data
    })
  }
}

const tabClk = (name) => {
  initTree()
  treeList.oper = name
}
const renderContent = (h, { root, node, data }) => {
  return h(
    'span',
    {
      style: {
        display: 'inline-block',
        width: '100%',
      },
    },
    [
      h('span', [
        h(resolveComponent('Icon'), {
          type: data.icon,
          style: {
            marginRight: '3px',
          },
        }),
        h('span', data.title),
      ]),
    ]
  )
}
</script>